<script setup>
import {onMounted, ref} from 'vue';
import {ElMessage} from "element-plus";

const loginData = ref({
    username: '',
    password: '',
    cptour:''
})

const editFrom=ref()

const loginLoading = ref(false);

const loginDataRules = ref({
  //是不是必填项，校验失败之后的提示。触发方式，change和blur，change是发生数据变化就会触发校验
  //blur是失去焦点触发校验
  //支持复杂的校验和自定义逻辑的校验，一般情况下这种就够用了。真正复杂的校验逻辑在后端
  //直接敲不触发校验规则，校验只有change的时候触发，就是发生变化的时候触发。
  username:[{required: true,message: '请填写用户名',trigger: 'change'}],
  password:[{required: true,message: '请填写密码',trigger: 'change'}],
  cptour:[{required: true,message: '请填写验证码',trigger: 'change'}]
})



const handleLogin=() =>{
  // 直接使用$refs来访问表单实例，无需作为参数传递
  const formEl = editFrom.value;
  if (formEl) {
    formEl.validate(async (valid) => {
      if (valid) {
        console.log('submit!');
        // 这里可以添加登录逻辑，比如调用API
        // 成功后可以使用ElMessage显示成功信息
        ElMessage.success('登录成功');
      } else {
        console.log('error submit!');
        // 显示错误信息
        ElMessage.error('请检查输入信息');
      }
    });
  } else {
    console.error('Form instance not found');
  }
}




</script>

<template>
  <div class="login">
    <!--设置卡片头部-->
    <!--通过header设置插槽，插槽最大的特点就是可以将html以及文本都放进去-->
    <!--插槽其实就是预留了位置-->
    <el-card class="login-card" >
      <template #header>
        <div class="login-card-header">
          <span>用户登录</span>
        </div>
      </template>
      <!--卡片的body  表单里面的数据全部都是对象里面的数据-->
      <!-- ref设置后，在script中能使用this.$refs拿到对应的对象，用于验证和reset表单数据 -->
      <el-form :model="loginData" :rules="loginDataRules" ref="editFrom">
        <!--这里的prop要跟rules里面的规则名对其用来校验规则-->
        <el-form-item prop="username">
          <!--refix-icon="UserFilled"图标做了全局引入，这里就不需要引入了-->
          <!--v-model.trim 其实双向绑定了loginData.username  trim其实就是去掉空格-->
          <!--placeholder 默认文字提示   placeholde 清除按钮-->
          <el-input prefix-icon="UserFilled" v-model.trim="loginData.username" maxlength="32" placeholder="请输入账号" clearable>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" prefix-icon="Lock" v-model.trim="loginData.password" maxlength="16" placeholder="请输入密码" clearable>
          </el-input>
        </el-form-item>

        <el-form-item prop="cptour">
          <el-input type="text" prefix-icon="ChatLineRound" v-model.trim="loginData.cptour" maxlength="16" placeholder="请输入验证码" clearable>
          </el-input>
        </el-form-item>
        <!--这里面不需要加校验 因为只是一个按钮-->
        <!--style="width: 100%;border-radius: 5px;" 这里设置的样式 圆角-->
        <el-form-item>
          <el-button type="primary" style="width: 100%;border-radius: 5px;" :loading="loginLoading" @click="handleLogin">登入</el-button>
        </el-form-item>


      </el-form>
    </el-card>
  </div>
</template>

<style scoped>

/*style中要加scoped,scoped用于各个页面之间的css属性的隔离，避免互相污染全局生效*/
.login{
  position: absolute; /*图片平铺开来*/
  width: 99%;/*最外层已经是body，有一层vh和vw了，其实定义完最外层就可以了，login会继承*/
  height: 98%;
  background-image: url(@/assets/img/login.png);
  background-size: 100%;
}

.login-card{
  position: absolute;
  left: 35%;
  top: 30%;
  width: 400px;
}

.login-card-header{
  text-align: center;
}
</style>